<template>
	<view>
		<topbar title="提现" jt_c="2" background="background:#222222;color:#fff;"></topbar>
		<view class="content dis_f_co">
			<view class="dis_f_sb_c title">
				<view>可提现金额:{{user.money}}</view>
				<view style="text-decoration: underline;color: #FA3534;" @click="qb_tx">全部提现</view>
			</view>
			<view class="top dis_f_co_l_c" style="padding: 24rpx;">
				<view>提现金额</view>
				<view class="dis_f_l_c">
					<view style="margin-right: 12rpx;">￥</view>
					<u-input v-model="je" placeholder="请输入金额" type="number" @input="testMoney"></u-input>
				</view>
			</view>
			<view class="top" style="padding:24rpx 0 0 0;">
				<view class="border" style="padding-bottom: 24rpx;padding-left: 24rpx;">
					提现方式
					<span style="color: red;">（注：请先到个人中心绑定支付宝信息）</span>
				</view>
				<view style="width: 100%;">
					<u-radio-group v-model="value"  style="width: 100%;">
						<!-- <view class="tx_btn border dis_f_co" @click="change(1)">
							<view class="dis_f_sb_c" style="width: 100%;">
								<view class="dis_f_l_c">
									<image class="logo" src="../../static/mine/vx.png" mode=""></image>
									<view>提现到银行卡</view>
								</view>
								<u-radio name="1"></u-radio>
							</view>
						</view> -->
						<!-- <view style="width: 100%;padding: 0 24rpx;" v-show="yh_show">
							<u-form :model="form" ref="uForm" label-width="140">
								<u-form-item label="姓名">
									<u-input v-model="form.name" placeholder="请填写姓名" />
								</u-form-item>
								<u-form-item label="选择银行">
									<u-input @click="show =true" v-model="form.bank" placeholder="请选择银行"
										:disabled="true" />
								</u-form-item>
								<u-form-item label="银行卡号">
									<u-input v-model="form.hao" placeholder="请输入银行卡号" />
								</u-form-item>
								<u-form-item label="确认卡号">
									<u-input v-model="form.hao1" placeholder="请确认银行卡号" />
								</u-form-item>
							</u-form>
							<u-picker @confirm="confirm" v-model="show" mode="selector" :range="bank" range-key="cateName"></u-picker>
						</view> -->
						<view class="tx_btn border">
							<view class="dis_f_sb_c" style="width: 100%;" @click="change(2)">
								<view class="dis_f_l_c">
									<image class="logo" src="../../static/mine/zfb.png" mode=""></image>
									<view>
										提现到绑定的支付宝
									</view>
								</view>
								<!-- <u-radio name="2"></u-radio> -->
							</view>
						</view>
						<!-- <view style="width: 100%;padding: 0 24rpx;" v-show="zfb_show">
							<u-form :model="form" ref="uForm" label-width="140">
								<u-form-item label="姓名">
									<u-input v-model="form.name2" placeholder="请填写姓名" disabled />
								</u-form-item>
								
								<u-form-item label="支付宝号">
									<u-input v-model="form.zfb" placeholder="请输入支付宝账号" disabled />
								</u-form-item>
								<u-form-item label="确认账号">
									<u-input v-model="form.zfb2" placeholder="请确认支付宝账号" />
								</u-form-item>
							</u-form>
							<u-picker @confirm="confirm" v-model="show" mode="selector" :range="bank" range-key="cateName"></u-picker>
						</view> -->
					</u-radio-group>
				</view>
			</view>
			<view style="padding: 24rpx;">
				<view class="dis_f_c_c tx_btn2" @click="is_pay_show">提现</view>
			</view>
		</view>
		<u-keyboard
			default=""
			ref="uKeyboard" 
			mode="number" 
			:mask="true" 
			:mask-close-able="false"
			:dot-enabled="false" 
			v-model="pay_show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{je}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						mode="box" 
						:maxlength="6"
						:dot-fill="true"
						v-model="password"
						:disabled-keyboard="true"
						@finish="finish"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: '',
				je: '',
				value: '',
				type: 2,
				form: {
					name: '',
					hao: '',
					hao1: '',
					bank: '',
					zfb:'',
					zfb2:'',
					name2:'',
				},
				show:false,
				// 把上面picker里的range-key="改成接口里的银行名字段名"
				bank:[{
					cateName:'建设银行',
					id:1
				},{
					cateName:'农业银行',
					id:2
				},{
					cateName:'济宁银行',
					id:3
				},],
				yh_show:false,
				zfb_show:true,
				
				price:0,
				password:'',
				pay_show:false,
			};
		},
		onShow() {
			this.get_user();
			this.get_bank();
			this.get_bank_list();

		},
		onLoad() {
			// this.get_user()
		},
		methods: {
			qb_tx(){
				this.je = this.user.money
			},
			confirm(e) {
				this.form.bank = this.bank[e[0]].cateName
			},
			change(e) {
				this.type = e
				this.value = e
			},
			// radioGroupChange(e) {
			// 	var that = this
			// 	this.type = e
			// 	this.zfb_show = false
			// 	this.yh_show = false
			// 	setTimeout(function() {
			// 	     if(that.type ==1){
			// 	     	that.yh_show = true
			// 	     }if(that.type==2){
			// 	     	that.zfb_show = true
			// 	     }
			// 	 }, 100);
				
			// },
			get_user() {
				this.$.ajax(1, 'post', 'index/getuser', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.user = res.userinfo
						this.form.name2 = res.userinfo.realname
						this.form.zfb = res.userinfo.alipay
					}
				})
			},
			get_bank() {
				this.$.ajax(1, 'post', 'index/get_bank', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.form.name = res.data.truename;
						this.form.hao = res.data.bank_card;
						this.form.hao1 = res.data.bank_card;
						this.form.bank = res.data.bank;
						this.form.zfb = res.data.zhifubao;
						this.form.zfb2 = res.data.zhifubao;
						this.form.name2 = res.data.zhifubao_truename;
					}
				})
			},
			get_bank_list() {
				this.$.ajax(1, 'post', 'index/get_bank_list', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.bank = res.data;
					}
				})
			},
			testMoney(e) {
				let that = this;
				let price = e
				if (price.indexOf(".") == 0) {
					//'首位小数点情况'
					price = price.replace(/[^$#$]/g, "0.");
					price = price.replace(/\.{2,}/g, ".");
				}
				price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				//重新赋值给input
				this.$nextTick(() => {
					this.je = price;
				});
			},
			submit () {
				if(this.je <= 0) {
					this.$.ti_shi('请填写提现金额');
					return false;
				}
				// if (this.type == 1) {
					
				// 	if (this.form.name == '') {
				// 		this.$.ti_shi('请输入收款人姓名');
				// 	}
				// 	if (this.form.bank == '') {
				// 		this.$.ti_shi('请选择银行');
				// 	}
				// 	if (this.form.hao == '') {
				// 		this.$.ti_shi('请输入银行卡号');
				// 	}
				// 	if (this.form.hao == this.form.hao1) {
				// 		this.$.ti_shi('两次输入的卡号不一致');
				// 	}
					
				// }else{
				// 	if (this.form.name2 == '') {
				// 		this.$.ti_shi('请输入收款人姓名');
				// 	}
				// 	if (this.form.zfb == '') {
				// 		this.$.ti_shi('请输入支付宝号');
				// 	}
				// 	// if (this.form.zfb == this.form.zfb2) {
				// 	// 	this.$.ti_shi('两次输入的支付宝不一致');
				// 	// }
				// }
				this.$.ajax(1, 'post', 'index/new_settixianlog', {
					uid: uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					// type:this.type,
					money:this.je,
					// form:this.form,
					password:this.password,
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						this.$.ti_shi(res.msg);
						var that = this;
						setTimeout(function() {
							that.$.open_tab('/pages/mine/mine');
						}, 2000); 
					}else{
						this.$.ti_shi(res.msg);
					}
				})
				this.password = '';
				this.pay_show = false
			},
			
			is_pay_show() {
				if(this.je <= 0) {
					this.$.ti_shi('请填写提现金额');
					return false;
				}
				this.pay_show = true;
			},
			onChange(val){
				// console.log(this.password)
				if(this.password.length<6){
					this.password += val;
					
				}
				
				if(this.password.length>=6){
					this.submit();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			showPop(flag = true){
				this.password = '';
				this.pay_show = flag;
			},
			
					
		}
	}
</script>

<style lang="scss">
	
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	.zf_btn{
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
	.content {
		width: 100%;
		padding-top: calc(var(--status-bar-height) + 88rpx);
		.tx_btn2{
			width: 100%;
			height: 88rpx;
			background-color: #FA3534;
			color: #fff;
			border-radius: 50rpx;
		}
		.title {
			padding: 24rpx;
		}

		.top {
			background-color: #fff;
			margin-bottom: 12rpx;
			width: 100%;

			.border {
				border-bottom: 2rpx solid #eee;
			}

			.tx_btn {
				width: 100%;
				// height: 120rpx;
				background-color: #fff;
				// border-radius: 20rpx;
				// box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
				padding: 30rpx 24rpx;
			}

			.logo {
				width: 60.04rpx;
				height: 60.04rpx;
				margin-right: 18rpx;
			}
		}
	}
</style>
